{% extends 'Base.html' %}
{% load staticfiles %}
{% load side %}
{% block main %}
    <div class="layui-col-md8" s>
        <span class="layui-breadcrumb" lay-separator="/"
              style="display:block;padding: 5px 10px;background-color: #fff">
          <a href="{% url 'article-index-view' %}" style="color:#1E9FFF">主页</a>
          <a href="{{ request.path }}" style="color:#1E9FFF">{{ path_name }}</a>
        </span>
        <div style="border-left: 0px;margin-top: 5px;text-wrap: none;background-color: #fff" class="layui-elem-quote">
            <a style="color:#1E9FFF;margin-left: 5px"
               href="{% url 'article-category' 'all' %}">全部文章</a>
            {% for category in categories %}
                <a style="color:#1E9FFF;margin-left: 5px"
                   href="{% url 'article-category' category.en_assortment %}">{{ category.assortment }}</a>
            {% endfor %}
        </div>
        {% if articles %}
            {% for article in  articles %}
                <div class="article-list-warp">
                    <a href="{% url 'article-detail-view' article.id %}" target="_blank">
                        <h3 class="layui-hide-xs">
                            <span style="font-size: 18px;font-weight: bold"> {{ article.title }}</span>
                        </h3>
                        <h3 class="layui-hide-sm layui-hide-md layui-hide-lg">
                            <span style="font-size: 16px;">{{ article.title }}</span>
                        </h3>
                    </a>
                    <small style="color:#888;word-wrap:break-word">{{ article.summary|slice:'100' }}</small>
                    <br/>
                    <span class="layui-badge layui-bg-blue">{{ article.category_name }}</span>
                    <span style="color: #009688"><small>更新时间：{{ article.update_time }}，作者：{{ article.nick_name }}</small></span>
                </div>
            {% endfor %}
        {% else %}
            <div>站长太懒了，这里什么也没有</div>
        {% endif %}

        {#  翻页#}
        <div style="border-left: 0px;margin-top: 5px;text-wrap: none;background-color: #fff" class="layui-elem-quote">
            {% include 'pagination/pagination.html' %}
        </div>
    </div>
    <link rel="stylesheet" href="{% static 'css/articlelist.css' %}">
    <script>
      layui.use('element', function () {
        layui.element.init()
      })
      let pathname = document.location.pathname
      $(`.layui-elem-quote [href='${pathname}']`)[0].style.color = '#5FB878'
    </script>
{% endblock %}
{% block side %}
    <div class="layui-col-md4">
        {# 推荐阅读 #}
        {% recommends %}
        {% include 'side/about.html' %}
    </div>
{% endblock %}